<script lang="ts" setup>
import { computed } from 'vue'
import { useDemoStore } from 'store/modules/DemoStore'

const demoStore = useDemoStore()
const demoNameComp = computed(() => demoStore.name)
const GETTER_NAME = computed(() => demoStore.GETTER_NAME)

function onClick() {
  demoStore.SET_NAME(new Date().toString())
}

/**
 * 测试pinia异步方法执行
 */
async function onDoName() {
  console.log('onDoName开始')
  await demoStore.doName({ name: '张三', age: 19 })
  console.log('onDoName结束')
}
</script>

<template>
  <div>
    <p>
      <router-link :to="{ name: 'Home' }">返回</router-link>
    </p>
    <p>{{ demoNameComp }}</p>
    <p>{{ GETTER_NAME }}</p>
    <button @click="onClick">改变pinia的name</button>
    <button @click="onDoName">执行远程doName</button>
    <p>
      <router-link :to="{ name: 'Home' }">返回</router-link>
    </p>
  </div>
</template>

<style lang="scss" scoped></style>
